Detección del modo de ventana en PWA Frontend: Adaptación del modo de visualización

Las aplicaciones web progresivas (PWA) están transformando la forma en que experimentamos la web. Ofrecen una sensación similar a la de una aplicación nativa directamente dentro de un navegador, brindando un rendimiento mejorado, capacidades fuera de línea y una mayor participación del usuario. Un aspecto crucial de la creación de una experiencia PWA atractiva es la adaptación al modo de visualización del usuario. Este artículo profundiza en el arte de detectar el modo de ventana de la PWA y adaptar su frontend para crear una experiencia de usuario intuitiva y fluida en varios dispositivos y entornos. Exploraremos el por qué, el cómo y las mejores prácticas para una adaptación eficaz del modo de visualización.

Comprensión de los modos de visualización de PWA

Antes de sumergirnos en la detección, aclaremos los diferentes modos de visualización en los que puede operar una PWA. Estos modos dictan cómo se presenta la PWA al usuario e influyen en el aspecto general. Comprenderlos es clave para proporcionar una experiencia coherente y optimizada.

• Modo Navegador: La PWA se ejecuta dentro de una pestaña de navegador estándar, completa con la barra de direcciones, los controles de navegación y los elementos de la interfaz de usuario del navegador. Este es el modo predeterminado cuando la PWA no está instalada o no se inicia como una aplicación independiente.
• Modo Independiente: La PWA aparece en su propia ventana dedicada, imitando una aplicación nativa. El cromo del navegador (barra de direcciones, navegación) suele estar oculto, lo que ofrece una experiencia más inmersiva y similar a la de una aplicación. Este modo se activa cuando el usuario instala la PWA en su dispositivo.
• Modo Pantalla Completa: La PWA ocupa toda la pantalla, proporcionando una experiencia aún más inmersiva al eliminar todos los elementos de la interfaz del navegador y las barras del sistema. Esto generalmente se habilita mediante una acción específica del usuario o dentro de la configuración de la PWA.
• Modo de IU mínima: La PWA se ejecuta en una ventana dedicada, pero solo con un conjunto mínimo de elementos de IU, como un botón de retroceso y una barra de direcciones.
• Superposición de control de ventana (WCO): Una nueva función que permite a las PWA personalizar la barra de título y los controles de ventana en modo independiente.

La elección del modo de visualización está influenciada por varios factores, incluido el dispositivo del usuario, el navegador, el sistema operativo y cómo se inició la PWA (por ejemplo, instalada a través de un aviso, abierta desde un acceso directo). Identificar y adaptarse correctamente a estos modos es vital para ofrecer una experiencia de usuario positiva.

¿Por qué adaptarse a los modos de visualización?

Adaptarse al modo de visualización de la PWA no se trata solo de cambios cosméticos; afecta significativamente la experiencia del usuario. He aquí por qué es crucial:

• Experiencia de usuario mejorada: Adaptar la interfaz de usuario al modo de visualización crea una experiencia más natural e intuitiva. Por ejemplo, ocultar elementos de navegación redundantes en modo independiente agiliza la interfaz.
• Consistencia mejorada de la interfaz de usuario/UX: Garantizar una presentación visual coherente en diferentes modos evita la confusión y genera confianza en el usuario.
• Uso óptimo del espacio en pantalla: En los modos independiente y de pantalla completa, puede maximizar el espacio en pantalla eliminando la interfaz de usuario innecesaria del navegador, lo que permite que su contenido brille.
• Consideraciones de accesibilidad: Las adaptaciones pueden mejorar la accesibilidad al proporcionar indicaciones visuales claras y una navegación intuitiva, independientemente del modo de visualización.
• Marca e identidad: Personalice la apariencia de la PWA para que se alinee con la identidad de su marca, especialmente en los modos independiente y de pantalla completa, para reforzar el reconocimiento de la marca.

Detección del modo de visualización

El mecanismo principal para detectar el modo de visualización es a través de la API `window.matchMedia()` y verificando la propiedad `navigator.standalone`.

1. `window.matchMedia()`

El método `window.matchMedia()` le permite consultar el estado actual del navegador en función de las consultas de medios. Podemos usar esto para determinar el modo de visualización consultando la función de medios `display-mode`.

            const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
const isFullscreen = window.matchMedia('(display-mode: fullscreen)').matches;
const isMinimalUI = window.matchMedia('(display-mode: minimal-ui)').matches;
const isBrowser = !isStandalone && !isFullscreen && !isMinimalUI; // Modo general.

            

              
                Copy
              
            
          

Este fragmento de código comprueba si el modo de visualización actual coincide con el modo independiente, de pantalla completa, de IU mínima o de navegador, y establece las variables booleanas en consecuencia. Esta es una forma sencilla de identificar el modo en el que se está ejecutando su PWA.

2. `navigator.standalone`

La propiedad `navigator.standalone` es un valor booleano que indica si la PWA se está ejecutando en modo independiente. Esta es una forma rápida y fácil de detectar si la PWA está instalada y se está ejecutando como una aplicación.

            const isStandalone = navigator.standalone;

            

              
                Copy
              
            
          

Nota importante: `navigator.standalone` puede ser ligeramente poco fiable en algunas plataformas o navegadores más antiguos. Para una detección de modo completa y más fiable, utilice una combinación de `window.matchMedia()` y `navigator.standalone`. Por ejemplo, verificar ambos puede proporcionar una solución más sólida en diferentes implementaciones de navegador.

Compatibilidad del navegador: La API `window.matchMedia()` es ampliamente compatible con los navegadores modernos. La propiedad `navigator.standalone` tiene buena compatibilidad en la mayoría de los navegadores modernos que admiten PWA (Chrome, Safari en iOS, etc.). Verifique la compatibilidad del navegador antes de implementar.

Estrategias de adaptación: modificación de la interfaz de usuario

Una vez que haya detectado con éxito el modo de visualización, el siguiente paso es adaptar su interfaz de usuario para mejorar la experiencia del usuario. Aquí hay varias estrategias:

• Eliminar la navegación redundante: Si su PWA está en modo independiente, los controles de navegación del navegador (atrás, adelante, barra de direcciones) generalmente están ocultos. Por lo tanto, puede eliminar o modificar cualquier elemento de navegación redundante en su aplicación para optimizar el espacio en pantalla.
• Ajustar los elementos de la interfaz de usuario: Modifique la apariencia de los elementos de su interfaz de usuario. Por ejemplo, puede usar tamaños de fuente más grandes, diferentes esquemas de color o diseños optimizados en modo de pantalla completa o independiente. Considere un sistema de temas que cambie automáticamente entre temas claros y oscuros según el modo de visualización o la configuración del sistema del usuario.
• Modificar la barra de la aplicación: En modo independiente, puede personalizar la barra de la aplicación para usar el título, la marca y los iconos de acción de su aplicación. En el modo de navegador, esta personalización puede ser innecesaria o incluso parecer fuera de lugar. Esto proporciona una experiencia personalizada para los usuarios.
• Integración del modo de pantalla completa: Ofrezca un botón o una configuración para ingresar al modo de pantalla completa, brindando una experiencia más inmersiva para los usuarios. Ajuste la interfaz de usuario en consecuencia y, potencialmente, oculte la barra de estado del sistema para maximizar la pantalla.
• Ajustar las funciones específicas del dispositivo: Si su PWA usa funciones específicas del dispositivo, ajuste la presentación y la funcionalidad en función del modo de visualización. Por ejemplo, si usa la cámara, considere proporcionar diferentes controles de cámara para los modos independiente y de navegador.
• Considere las capacidades fuera de línea: Asegúrese de que su PWA proporcione contenido y funcionalidad relevantes fuera de línea, como el almacenamiento en caché de datos, el acceso fuera de línea a la información almacenada o la entrega de notificaciones útiles.
• Notificaciones y avisos al usuario: Ajuste la forma en que muestra las notificaciones y los avisos al usuario en función del modo de visualización. Por ejemplo, en modo independiente, puede usar notificaciones a nivel del sistema, mientras que en modo de navegador, puede usar notificaciones dentro de la aplicación.

Ejemplos de código: implementación práctica

Ilustremos con algunos ejemplos de código prácticos sobre cómo detectar el modo de visualización y adaptar la interfaz de usuario.

Ejemplo 1: detección básica y modificación de la interfaz de usuario

Este ejemplo demuestra cómo detectar el modo de visualización y modificar el color de fondo de la aplicación según si está en modo independiente o en modo de navegador.

            
// Función para detectar el modo de visualización y aplicar cambios en la interfaz de usuario
function applyDisplayModeChanges() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || navigator.standalone;

  if (isStandalone) {
    // Modo independiente
    document.body.style.backgroundColor = '#f0f0f0'; // Fondo gris claro
    // Agregue otras adaptaciones de la interfaz de usuario específicas del modo independiente aquí (por ejemplo, ocultar la navegación)
  } else {
    // Modo de navegador
    document.body.style.backgroundColor = '#ffffff'; // Fondo blanco
    // Agregue otras adaptaciones de la interfaz de usuario específicas del navegador aquí
  }
}

// Llama a la función inicialmente y al cambiar el tamaño de la ventana (para manejar los cambios de modo).
applyDisplayModeChanges();
window.addEventListener('resize', applyDisplayModeChanges);

            

              
                Copy
              
            
          

Este código primero verifica si `isStandalone` es `true`. Si es así, cambia el color de fondo. Si no, establece el fondo en blanco. Este es un ejemplo simple, pero demuestra el principio central de adaptar la interfaz de usuario en función del modo de visualización.

Ejemplo 2: adaptaciones avanzadas de la interfaz de usuario con la barra de la aplicación

Este fragmento de código muestra cómo personalizar la barra de la aplicación según si la PWA se está ejecutando en modo independiente.

            
<!DOCTYPE html>
<html>
<head>
  <title>Mi PWA</title>
  <link rel="manifest" href="manifest.json">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .app-bar {
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
    }
    .app-bar-standalone {
      /* Estilo personalizado para el modo independiente */
    }
  </style>
</head>
<body>
  <div class="app-bar" id="appBar">Mi aplicación</div>
  <!-- Otro contenido de la aplicación -->

  <script>
    function updateAppBar() {
      const isStandalone = window.matchMedia('(display-mode: standalone)').matches || navigator.standalone;
      const appBar = document.getElementById('appBar');

      if (isStandalone) {
        appBar.textContent = 'Mi aplicación (independiente)'; // Contenido de la barra de la aplicación
        appBar.classList.add('app-bar-standalone');
      } else {
        appBar.textContent = 'Mi aplicación (navegador)'; // Contenido de la barra de la aplicación
        appBar.classList.remove('app-bar-standalone');
      }
    }

    // Configuración inicial y escucha de cambios
    updateAppBar();
    window.addEventListener('resize', updateAppBar);
  </script>
</body>
</html>

            

              
                Copy
              
            
          

En este código, la función `updateAppBar` determina el modo de visualización y actualiza el contenido de la barra de la aplicación en consecuencia. Verificamos `navigator.standalone` además de la verificación de matchMedia.

Ejemplo 3: uso de un service worker para manejar las operaciones sin conexión

Este ejemplo utiliza un service worker para proporcionar capacidades sin conexión.

            
// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/img/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Acierto de caché - devuelve la respuesta
        if (response) {
          return response;
        }
        // No está en la caché - buscar y almacenar en caché
        return fetch(event.request).then(
          function(response) {
            // Comprueba si recibimos una respuesta válida
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANTE: Clona la respuesta. Una respuesta es una transmisión
            // y solo se puede consumir una vez.
            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });
            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

Este es un service worker básico que almacena en caché los archivos esenciales de la PWA. Esto mejora la experiencia del usuario, especialmente en condiciones de red deficientes o cuando el usuario está desconectado.

Mejores prácticas para la adaptación del modo de visualización

Estas son algunas de las mejores prácticas clave para implementar eficazmente la adaptación del modo de visualización:

• Detectar temprano y con frecuencia: Siempre verifique el modo de visualización al principio de la inicialización de su aplicación y regularmente para detectar cualquier cambio (por ejemplo, cuando se cambia el tamaño de la aplicación).
• Usar la detección de funciones: Antes de usar funciones o adaptaciones específicas del modo de visualización, asegúrese de que su código sea compatible con navegadores más antiguos mediante el empleo de la detección de funciones (por ejemplo, verifique si existe `window.matchMedia`).
• Mantenlo simple: No complique demasiado las adaptaciones. Concéntrese en los elementos centrales que mejoran la experiencia del usuario en cada modo.
• Probar a fondo: Pruebe su PWA en varios dispositivos, navegadores y modos de visualización para asegurarse de que sus adaptaciones funcionen según lo previsto. Use emuladores, simuladores y dispositivos reales para realizar pruebas exhaustivas.
• Consideraciones de rendimiento: Asegúrese de que las adaptaciones no afecten negativamente el rendimiento de su PWA. Optimice las imágenes, minimice el uso de JavaScript y use reglas CSS eficientes.
• Preferencias del usuario: Si es factible, permita que los usuarios personalicen sus preferencias de visualización (por ejemplo, tema claro/oscuro, tamaño de fuente) y adapte la PWA en consecuencia. Almacene estas preferencias mediante el almacenamiento local o las cookies.
• Considere la accesibilidad: Asegúrese de que sus adaptaciones sean accesibles para todos los usuarios, incluidos aquellos con discapacidades. Use atributos ARIA apropiados y pruebe con lectores de pantalla.
• Supervisar y refinar: Supervise regularmente el uso de su PWA y los comentarios de los usuarios para identificar áreas de mejora. Realice los ajustes necesarios en función del comportamiento del usuario y las métricas de rendimiento. Use análisis para identificar los dispositivos y entornos en los que los usuarios están experimentando la PWA.
• Mejora progresiva: Concéntrese en construir una experiencia central sólida que funcione bien en todos los modos de visualización y mejore progresivamente la interfaz de usuario para los modos más avanzados. La funcionalidad central de su aplicación no debe verse comprometida por una implementación incompleta.

Técnicas y consideraciones avanzadas

• Personalización dinámica de la barra de la aplicación y la barra de título: Para una personalización más sofisticada, explore el uso de la propiedad `display_override` manifest.json, así como la API Window Controls Overlay, para modificar la barra de la aplicación y la barra de título en modo independiente. Esto proporciona un control mucho mayor sobre la apariencia.
• Gestión del color del tema: Use la metaetiqueta `theme-color` en su HTML para establecer el color de los elementos de la interfaz de usuario del navegador (por ejemplo, la barra de estado) cuando la PWA está en modo independiente. Esto garantiza una integración perfecta con la aplicación.
• Personalización de gestos e interacciones: En los modos independiente o de pantalla completa, considere personalizar los gestos y las interacciones para mejorar la experiencia del usuario. Por ejemplo, implemente gestos de deslizamiento para la navegación o interacciones táctiles personalizadas.
• Considere el cambio de tamaño de la ventana y los cambios de orientación: Escuche los eventos `resize` para responder al cambio de tamaño de la ventana y los cambios de orientación (vertical/horizontal). Adapte su diseño y los elementos de la interfaz de usuario dinámicamente para adaptarse a estos cambios.
• Herramientas de prueba: Use las herramientas de desarrollador del navegador, como Chrome DevTools, para simular diferentes modos de visualización y probar sus adaptaciones. Use el "Modo de dispositivo" para simular varios dispositivos.
• Utilice bibliotecas de gestión de estado: Si está utilizando un marco (React, Vue, Angular, etc.), use bibliotecas de gestión de estado como Redux o Vuex para administrar el estado del modo de visualización y evitar la perforación de propiedades en sus componentes.
• Aproveche las API web: Explore API web adicionales, como la API Web Share, para proporcionar acceso integrado a las funciones y la funcionalidad del dispositivo.
• Considere el desarrollo multiplataforma: Si se dirige a múltiples plataformas (por ejemplo, Android, iOS, Escritorio), use herramientas como Capacitor o Ionic para empaquetar su PWA y asegurarse de que las adaptaciones del modo de visualización se apliquen en todas las plataformas de destino.

Integración de la adaptación del modo de visualización en el ciclo de vida de la PWA

La adaptación del modo de visualización no es una implementación única, sino un proceso continuo. Así es como se integra en el ciclo de vida del desarrollo de la PWA:

• Planificación: Durante la fase de planificación, defina los objetivos de la experiencia del usuario, identifique los modos de visualización de destino y determine qué elementos de la interfaz de usuario requieren adaptación.
• Diseño: Cree maquetas y prototipos de interfaz de usuario para diferentes modos de visualización. Considere el flujo de usuario general y cómo se verá afectado por cada modo.
• Desarrollo: Implemente la lógica de detección y adaptación del modo de visualización. Use las estrategias y los ejemplos de código descritos anteriormente.
• Pruebas: Pruebe exhaustivamente en varios dispositivos y navegadores. Use las herramientas de desarrollador del navegador, los emuladores y los dispositivos reales para verificar sus adaptaciones.
• Implementación: Implemente la PWA y supervise su rendimiento.
• Mantenimiento e iteración: Supervise continuamente los comentarios de los usuarios, analice los datos de uso y realice mejoras en las adaptaciones del modo de visualización en función de los comportamientos observados.

Ejemplos y aplicaciones globales

Las adaptaciones del modo de visualización de la PWA tienen una relevancia generalizada en varias industrias y aplicaciones en todo el mundo. Aquí hay algunos ejemplos:

• Comercio electrónico (en todo el mundo): Las aplicaciones de comercio electrónico pueden mejorar la experiencia de compra en modo independiente eliminando el cromo del navegador y proporcionando una experiencia de navegación más limpia y sin distracciones. Los elementos personalizados, como una barra de aplicaciones personalizada, pueden mejorar la percepción general de la marca por parte del usuario y aumentar las conversiones.
• Noticias y medios (global): Las aplicaciones de noticias pueden adaptar la presentación del artículo para mejorar la legibilidad en diferentes dispositivos y tamaños de pantalla. El modo de pantalla completa se puede usar para una reproducción de video mejorada. Por ejemplo, BBC News o The New York Times usan el modo de visualización para garantizar que la experiencia del usuario sea la mejor posible, independientemente de cómo se acceda a la aplicación.
• Plataformas de redes sociales (global): Las aplicaciones de redes sociales pueden optimizar la interacción del usuario con el contenido eliminando los elementos de la interfaz del navegador en modo independiente. Pueden proporcionar una experiencia intuitiva similar a la de una aplicación móvil para sus usuarios con diferentes características y ajustes de la interfaz de usuario.
• Aplicaciones de atención médica (global): Las aplicaciones de atención médica pueden beneficiarse de la adaptación del modo de visualización al proporcionar una accesibilidad mejorada para los usuarios con discapacidades visuales, garantizar una interfaz de usuario coherente en diferentes dispositivos y permitir que los usuarios personalicen la aplicación en función de sus necesidades específicas.
• Plataformas de educación y aprendizaje (global): Las plataformas de aprendizaje pueden aprovechar la adaptación del modo de visualización para mejorar la experiencia de aprendizaje al proporcionar una interfaz sin distracciones, optimizar la presentación del contenido para varios tamaños de pantalla y proporcionar experiencias de aprendizaje interactivas.

Estos ejemplos subrayan la importancia de la adaptación del modo de visualización para las PWA en aplicaciones globales, lo que permite a los usuarios recibir la mejor y más personalizada experiencia posible.

Conclusión

Adaptar su PWA a diferentes modos de visualización es una parte fundamental de la creación de una experiencia de usuario de alta calidad. Al detectar el modo actual e implementar adaptaciones de interfaz de usuario/UX personalizadas, puede brindar una experiencia más intuitiva, atractiva y eficiente para sus usuarios. Desde mejorar el espacio en pantalla hasta ofrecer una sensación más similar a la de una aplicación, la adaptación del modo de visualización es fundamental para el éxito de la PWA. Al implementar las técnicas y las mejores prácticas descritas en esta guía, puede asegurarse de que su PWA ofrezca una experiencia excepcional en todos los dispositivos, lo que la convierte en una herramienta poderosa para llegar a los usuarios en todo el mundo. La prueba continua, la recopilación de comentarios de los usuarios y la iteración en sus adaptaciones garantizarán que su PWA permanezca optimizada y brinde la mejor experiencia de usuario posible a medida que evoluciona la web. Abrace la oportunidad de optimizar para estos diversos modos de visualización para garantizar una experiencia perfecta para los usuarios a nivel mundial.